window.addEventListener('load', function () {
       // 1. 获取元素
       var arrow_l = document.querySelector('.arrow-l');
       var arrow_r = document.querySelector('.arrow-r');
       var focus = document.querySelector('.focus');
       var focusWidth = focus.offsetWidth;
       // 2. 鼠标经过focus 就显示隐藏左右按钮
       focus.addEventListener('mouseenter', function () {
              arrow_l.style.display = 'block'
              arrow_r.style.display = 'block'
              clearInterval(timer);
              timer = null
       })
       focus.addEventListener('mouseleave', function () {
              arrow_l.style.display = 'none'
              arrow_r.style.display = 'none'
               timer = setInterval(function(){
                     // 自动触发点击事件
                     arrow_r.click()
              },2000)
       })
       var ul = focus.querySelector('ul');
       var lis = ul.children;
       var ol = focus.querySelector('ol');
       for (var i = 0; i < lis.length; i++) {
              var li = document.createElement('li');
              li.setAttribute('index', i)
              ol.appendChild(li);
              li.addEventListener('click', function () {
                     for (var i = 0; i < ol.children.length; i++) {
                            ol.children[i].className = ''
                     }
                     var index = this.getAttribute('index');
                     num = index;
                     var focusWidth = index * focus.offsetWidth;
                     console.log(index);
                     circle = index
                     this.className = 'current'
                     animate(ul, -focusWidth)
              })
       }
       // 设置ol的第一个小li的底色

       ol.firstElementChild.className = 'current'
       var app_li = ul.children[0].cloneNode(true)
       ul.appendChild(app_li)
       var num = 0;
       var circle = 0
       var flag = true
       // 节流阀
       arrow_r.addEventListener('click', function () {
              if(flag){
                     flag = false
              if (num == ul.children.length - 1) {
                     ul.style.left = 0;
                     num = 0;
              }
              num++;
              //       var ar_left = ul.offsetLeft - focus.offsetWidth
              animate(ul, -num * focus.offsetWidth,function(){
                     flag = true;
              })
              circle++
              if (circle == ol.children.length) {
                     circle = 0
              }
              for (var i = 0; i < ol.children.length; i++) {
                     ol.children[i].className = ''
              }
              ol.children[circle].className = 'current'
       }
       })
       arrow_l.addEventListener('click', function () {
              if (num == 0) {
                     ul.style.left = -(ul.children.length - 1) * focus.offsetWidth+ 'px';
                     num = ul.children.length -1;
              }
              num--;
              //       var ar_left = ul.offsetLeft - focus.offsetWidth
              animate(ul, -num * focus.offsetWidth)
              circle--;
              if (circle <0) {
                     circle = ul.children.length-2
              }
              for (var i = 0; i < ol.children.length; i++) {
                     ol.children[i].className = ''
              }
              ol.children[circle].className = 'current'
       })
       // arrow_l.addEventListener('click', function () {
       //        num--;
       //        //       var ar_left = ul.offsetLeft + focus.offsetWidth 一个绝妙的方法
       //        animate(ul, num * focus.offsetWidth)
       // })
       var timer = setInterval(function(){
              // 自动触发点击事件
              arrow_r.click()
       },2000)
})